import '@umijs/max';
import React, {useState} from 'react';

import {Button, Col, Drawer, Form, Input, message, Row, Space, Spin} from 'antd';
import {FormInstance} from "antd/es/form";
import {simpleQueryUsingPOST} from "@/services/api/userDataStructureController";


export type Props = {
  onCancel: () => void;
  visible: boolean;
};




const QueryModal: React.FC<Props> = (props) => {
  const {visible, onCancel} = props;
  const [queryResult, setQueryResult] = useState<string>("");
  const [submitting, setSubmitting] = useState<boolean>(false);
  const formRef = React.useRef<FormInstance>(null);


  const handleCancel = () => {
    formRef.current?.resetFields(); // 重置表单
    setQueryResult(""); // 清空查询结果
    onCancel(); // 关闭 Drawer
  };
  const onResultChange = () => {
    if (queryResult) {
      formRef.current?.setFieldsValue({queryResult: queryResult});
    }
    return queryResult;
  };

  const onFinish = async (values: any) => {
    //避免重复提交
    if (submitting) {
      return;
    }
    setSubmitting(true);
    console.log("values", values);
    try {
      const res = await simpleQueryUsingPOST({
          sql: values?.sql,
        }
      );
      if (!res?.data) {
        message.error('请求失败');
      } else if (res.code === 0) {
        message.success('请求成功！');
        setQueryResult(res.data);
      } else {
        message.error('请求失败：' + res.message);
      }
    } catch (e: any) {
      message.error('请求失败：' + e.message);
    }

    // if (queryResult) {
    //   formRef.current?.setFieldsValue({queryResult: queryResult});
    // }
    setSubmitting(false);
  };

  return (
    <>
      <Drawer
        title="查询数据"
        width={720}
        onClose={handleCancel}
        open={visible}
        placement={'top'}
        bodyStyle={{paddingBottom: 80}}
        extra={
          <Space>
            <Button onClick={handleCancel}>Cancel</Button>
            <Button loading={submitting} disabled={submitting} type="primary" onClick={() => formRef.current?.submit()}>
              Submit
            </Button>
          </Space>
        }
      >
        <Form layout="vertical" ref={formRef} hideRequiredMark onFinish={onFinish}>
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item
                name="sql"
                label="SQL eg：select 1,3 from table between 3 and 6 "
                rules={[{required: true, message: '请输入查询语句'}]}
              >
                <Input allowClear={true} placeholder="请输入查询语句"/>
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={24}>
              <Form.Item
                name="queryResult"
                label="查询结果"
              >
                <Input.TextArea value={onResultChange()} rows={6} placeholder="结果将展示在这里">
                  <Spin spinning={submitting}/>
                </Input.TextArea>
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Drawer>
    </>
  );
};
export default QueryModal;



